<template>
    <n-card v-if="userStore.userInfo.id">
        <div class="search_team">
            <n-popselect :options="options" trigger="click" @update:value="handleUpdateTeam1">
                <n-input-group>
                    <n-input v-model:value="team1" :style="{ width: '80%' }" placeholder="请输入Team1" clearable />
                    <n-button :style="{ width: '20%' }" @click="handleSearch">
                        <template #icon>
                            <n-icon :size="24">
                                <SearchCircleOutline />
                            </n-icon>
                        </template>
                    </n-button>
                </n-input-group>
            </n-popselect>
            <n-popselect :options="options" trigger="click" @update:value="handleUpdateTeam2">
                <n-input-group>
                    <n-input v-model:value="team2" :style="{ width: '80%' }" placeholder="请输入Team2" clearable />
                    <n-button :style="{ width: '20%' }" @click="handleSearch2">
                        <template #icon>
                            <n-icon :size="24">
                                <SearchCircleOutline />
                            </n-icon>
                        </template>
                    </n-button>
                </n-input-group>
            </n-popselect>
        </div>
        <n-table :single-line="false">
            <thead>
                <tr>
                    <th align="center">TEAM</th>
                    <th align="center">MEMEBER</th>
                    <th align="center">Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td width="100px">{{ memenbers.team1.teamName }}</td>
                    <td>{{ memenbers.team1.survivor.join(',') }},{{ memenbers.team1.hunter.join(',') }}</td>
                    <td rowspan="2" width="150px" align="center">
                        <n-button type="primary" @click="handleEmit">{{ $t('button.sendPerson') }}</n-button>
                    </td>
                </tr>
                <tr>
                    <td>{{ memenbers.team2.teamName }}</td>
                    <td>{{ memenbers.team2.survivor.join(',') }},{{ memenbers.team2.hunter.join(',') }}</td>
                </tr>
            </tbody>
        </n-table>
    </n-card>
</template>

<script setup lang='ts' name="AsgTeamSelect">
import { ref, reactive } from 'vue'
import { searchTeam } from '@/api/team';
import type { SelectOption } from 'naive-ui';
import { SearchCircleOutline } from '@vicons/ionicons5';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
 
interface Team {
    teamName: string;
    survivor: string[];
    hunter: string[];
}

interface TeamOption extends SelectOption {
    teamMember: {
        survivor: string[];
        hunter: string[];
    };
}

const team1 = ref<string>('');
const team2 = ref<string>('');
const emits = defineEmits<{
    (event: 'emitMemeber', memenbers: { team1: Team, team2: Team }): void;
}>()

const options = ref<TeamOption[]>([]);
const memenbers = reactive<{ team1: Team, team2: Team }>({
    team1: {
        teamName: '',
        survivor: [],
        hunter: []
    },
    team2: {
        teamName: '',
        survivor: [],
        hunter: []
    }
})

const handleSearch = async () => {
    try {
        options.value = [];
        if (!team1.value) return;
        const result = await searchTeam(team1.value);
        if (result && Array.isArray(result)) {
            options.value = result.map(item => {
                return {
                    label: `${item.name}:${item.role.map((role:any) => role.role_name).join(',')}`,
                    value: item.name,
                    teamMember: {
                        survivor: item.role.filter((role:any) => role.role_lin === '求生者').map((iter:any) => iter.role_name),
                        hunter: item.role.filter((role:any) => role.role_lin === '监管者').map((iter:any) => iter.role_name)
                    }
                } as TeamOption
            })
        }
    } catch (error) {
        console.log(error, 'error');
    }
}

const handleSearch2 = async () => {
    try {
        options.value = [];
        if (!team2.value) return;
        const result = await searchTeam(team2.value);
        if (result && Array.isArray(result)) {
            options.value = result.map(item => {
                return {
                    label: `${item.name}:${item.role.map((role:any) => role.role_name).join(',')}`,
                    value: item.name,
                    teamMember: {
                        survivor: item.role.filter((role:any) => role.role_lin === '求生者').map((iter:any) => iter.role_name),
                        hunter: item.role.filter((role:any) => role.role_lin === '监管者').map((iter:any) => iter.role_name)
                    }
                } as TeamOption
            })
        }
    } catch (error) {
        console.log(error, 'error');
    }
}

const handleUpdateTeam1 = (value: string, option: SelectOption) => {
    const teamOption = option as TeamOption;
    memenbers.team1.teamName = value;
    memenbers.team1.survivor = [...teamOption.teamMember.survivor];
    memenbers.team1.hunter = [...teamOption.teamMember.hunter];
}

const handleUpdateTeam2 = (value: string, option: SelectOption) => {
    const teamOption = option as TeamOption;
    memenbers.team2.teamName = value;
    memenbers.team2.survivor = [...teamOption.teamMember.survivor];
    memenbers.team2.hunter = [...teamOption.teamMember.hunter];
}

const handleEmit = () => {
    emits('emitMemeber', memenbers)
}
</script>
<style scoped lang='scss'>
.search_team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    margin-bottom: 1em;
}
</style>